<template>
  <div :class="className" :style="{height:height,width:width}" />
</template>

<script>
import * as echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from './mixins/resize'

const animationDuration = 6000


import { statusStatic } from "@/api/wasterTran/static";


export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '300px'
    }
  },
  data() {
    return {
      chart: null,
      orderDataList: [], 
      xAxisData: ['待转单', '转单中', '已完成', '已取消'],
      // xAxisData: [],
      // seriesData: [15, 26, 18, 35],
      seriesData: [],

    }
  },
  mounted() {
    // this.$nextTick(() => {
    //   this.initChart()
    // })
    this.getStatusStatic()
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    
    
    // 垃圾类型统计
    getStatusStatic() {
      console.log('getStatusStatic')
      let body = {
          
      }
      statusStatic(body).then(response => {
        console.log(response)
        this.statusStaticList = response.data
        for(let i=0; i<this.statusStaticList.length; i++){
          if(this.statusStaticList[i].name == "待转单"){
            this.seriesData[0] = this.statusStaticList[i].num
          }

          if(this.statusStaticList[i].name == "转单中"){
            this.seriesData[1] = this.statusStaticList[i].num
          }
          if(this.statusStaticList[i].name == "已完成"){
            this.seriesData[2] = this.statusStaticList[i].num
          }
          if(this.statusStaticList[i].name == "已取消"){
            this.seriesData[3] = this.statusStaticList[i].num
          }
          // this.xAxisData.push(this.statusStaticList[i].name)
          // this.seriesData.push(this.statusStaticList[i].num)
        }
        this.initChart()
      })
    },
    initChart() {
      this.chart = echarts.init(this.$el, 'macarons')

      this.chart.setOption({
        title : {
          text: '状态分布',
          x:'center'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          top: 50,
          left: '2%',
          right: '2%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [{
          type: 'category',
          data: this.xAxisData,
          axisTick: {
            alignWithLabel: true
          }
        }],
        yAxis: [{
          type: 'value',
          axisTick: {
            show: false
          }
          // ,
          // axisLabel: {
          //   formatter: '{value}千'
          // }
        }],
        series: [{
          name: '联单数量',
          type: 'bar',
          stack: 'vistors',
          barWidth: '60%',
          data: this.seriesData,
          animationDuration
        }]
      })
    }
  }
}
</script>
